<script setup lang="ts">
defineProps<{
  picture?: string
  title: string
  price: string
}>()
</script>

<template>
  <view class="mb-24rpx flex items-center rounded-24rpx bg-white p-18rpx">
    <uv-image
      width="238rpx"
      height="238rpx"
      radius="24rpx"
      :src="withDomain(picture!)"
    >
      <template #loading>
        <uv-loading-icon color="#666666" />
      </template>
    </uv-image>
    <Spacer width="20" />
    <view class="h-238rpx w-full flex flex-col justify-between">
      <view class="text-32rpx text-#333333 font-medium leading-48rpx">
        {{ title }}
      </view>
      <view class="flex items-center justify-between rounded-15rpx from-#96CCFA bg-gradient-to-r px-17rpx py-13rpx">
        <view class="flex items-baseline text-#1B85FF">
          <view class="text-24rpx">
            ¥
          </view>
          <view class="text-40rpx">
            {{ price }}
          </view>
        </view>
        <button class="rounded-full from-#77DAFE to-#4999F7 bg-gradient-to-l px-18rpx py-16rpx text-28rpx text-white leading-28rpx">
          了解详情
        </button>
      </view>
    </view>
  </view>
</template>
